<template>
  <view class="root">
    <view class="content-wrapper">
      <yy-title title="当户信息"></yy-title>
      <view class="ul-wrapper">
        <view class="u-item">
          <view class="u-label">
            当户姓名:
          </view>
          <view class="u-value">
            {{form.pawnName}}
          </view>
        </view>
        <view class="u-item">
          <view class="u-label">
            联系方式:
          </view>
          <view class="u-value">
            {{form.pawnPhone}}
          </view>
        </view>
        <view class="u-item">
          <view class="u-label">
            身份证号:
          </view>
          <view class="u-value">
            {{encryptIDCard(form.pawnIdCard)}}
          </view>
        </view>
      </view>
    </view>
    <view class="content-wrapper">
      <yy-title title="当物信息"></yy-title>
      <view class="goods-msg" v-for="(item,index) in form.pawnItemList" :key="index">
        <view class="p-img-wrapper">
          <image :src="`${imgPrefix}${item.pawnItemPhoto}`" class="p-img"
            @click="pvwImage([`${imgPrefix}${item.pawnItemPhoto}`])" mode="aspectFill"></image>
        </view>
        <view class="right-i">
          <view class="title-name">
            {{item.pawnItemName}}
          </view>
          <view class="item-info">
            <view class="i-label">
              规格状况
            </view>
            <view class="i-value">
              {{item.pawnItemSpecifications}}
            </view>
          </view>
          <view class="item-info">
            <view class="i-label">
              数 量
            </view>
            <view class="i-value">
              {{item.pawnItemNumber}}
            </view>
          </view>
          <view class="item-info">
            <view class="i-label">
              金 额
            </view>
            <view class="i-value">
              {{item.pawnItemMoney}}元
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="content-wrapper">
      <yy-title title="典当信息"></yy-title>
      <view class="ul-wrapper">
        <view class="u-item">
          <view class="u-label">
            合计金额:
          </view>
          <view class="u-value">
            {{amount}}元
          </view>
        </view>
        <view class="u-item">
          <view class="u-label">
            典当期限:
          </view>
          <view class="u-value">
            {{moment(form.pawnStartTime).format('YYYY/MM/DD')}}至{{moment(form.pawnEndTime).format('YYYY/MM/DD')}}
          </view>
        </view>
        <view class="u-item">
          <view class="u-label">
            上报时间:
          </view>
          <view class="u-value">
            {{moment(form.createTime).format('YYYY/MM/DD HH:mm:ss')}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getPawnRecordDetails
  } from '../../api/api';
  import {
    getOptionsParams,
    pvwImage,
    encryptIDCard
  } from '@/utils/util.js'
  import moment from '../../utils/moment';

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        baseURL: this.$baseURL,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        routerParams: {},
        form: {},
        amount: 0
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      this.getDetail()
    },
    methods: {
      encryptIDCard,
      pvwImage,
      moment,
      getDetail() {
        getPawnRecordDetails({
          id: this.routerParams.id
        }).then((res) => {
          if (res.code == 200) {
            this.form = res.result;
            this.amount = this.form.pawnItemList.reduce((acc, curr) => {
              acc += curr.pawnItemMoney
              return acc
            }, 0)
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    background: #F9F9F9;
    padding: 16rpx;

    .content-wrapper {
      background: #FFFFFF;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.1608);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 40rpx 20rpx;
      margin-bottom: 20rpx;
      padding-top: 10rpx;
    }

    .ul-wrapper {
      .u-item {
        display: flex;
        margin-top: 22rpx;
        padding-left: 15rpx;

        .u-label {
          width: 124rpx;
          flex-shrink: 0;
          margin-right: 14rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #999999;
        }

        .u-value {
          font-weight: bold;
          font-size: 28rpx;
          color: #101010;
        }
      }
    }

    .goods-msg {
      display: flex;
      background: #F9F9F9;
      padding: 20rpx;
      margin-bottom: 16rpx;

      .p-img-wrapper {
        width: 264rpx;
        height: 234rpx;
        margin-right: 19rpx;
        flex-shrink: 0;

        .p-img {
          width: 100%;
          height: 100%;
        }
      }

      .right-i {
        .title-name {
          font-weight: bold;
          font-size: 32rpx;
          color: #181818;
        }

        .item-info {
          display: flex;
          margin-top: 15rpx;

          .i-label {
            width: 119rpx;
            position: relative;
            font-weight: 500;
            font-size: 28rpx;
            color: #999999;
            text-align: justify;
            text-align-last: justify;
            margin-right: 20rpx;
            flex-shrink: 0;

            &::after {
              content: ':';
              position: absolute;
              right: -6rpx;
            }

          }

          .i-value {}
        }
      }
    }
  }
</style>